import React, { useState } from 'react'
import './HistorySection.css'

function HistorySection({ data }) {
  const [expandedIds, setExpandedIds] = useState(
    data.filter(item => item.expanded).map(item => item.id)
  )

  const toggleExpand = (id) => {
    setExpandedIds(prev => 
      prev.includes(id) 
        ? prev.filter(item => item !== id)
        : [...prev, id]
    )
  }

  return (
    <section className="section">
      <h2 className="section-title">历史数据</h2>
      <div className="history-list">
        {data.map(item => {
          const isExpanded = expandedIds.includes(item.id)
          
          return (
            <div key={item.id} className="history-card">
              <div className="history-header">
                <button 
                  className={`expand-button ${isExpanded ? 'expanded' : ''}`}
                  onClick={() => toggleExpand(item.id)}
                >
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M4 2L8 6L4 10" stroke="#999" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>

                <div className="history-content">
                  {/* Tags */}
                  <div className="tags">
                    {item.tags.map((tag, index) => (
                      <span 
                        key={index} 
                        className={`tag ${tag === '王者荣耀' ? 'tag-premium' : ''}`}
                      >
                        {tag === '王者荣耀' && (
                          <svg className="crown-icon" width="12" height="12" viewBox="0 0 12 12" fill="none">
                            <path d="M6 1L4.5 4.5L1 3L2 7L6 6L10 7L11 3L7.5 4.5L6 1Z" fill="#faad14"/>
                          </svg>
                        )}
                        {tag}
                      </span>
                    ))}
                  </div>

                  {/* Participants */}
                  <div className="participants">
                    <div className="participant-group">
                      <span className="participant-label">创建者</span>
                      <div className="avatars">
                        {item.creator.slice(0, 2).map((avatar) => (
                          <div key={avatar} className="avatar" style={{ background: `hsl(${(avatar.charCodeAt(0) * 60) % 360}, 60%, 50%)` }}>
                            {typeof avatar === 'string' && avatar.length > 0 ? avatar.charAt(0).toUpperCase() : ''}
                          </div>
                        ))}
                        {item.creatorCount > 0 && (
                          <div className="avatar-more">+{item.creatorCount}</div>
                        )}
                      </div>
                    </div>
                    <div className="participant-group">
                      <span className="participant-label">协作者</span>
                      <div className="avatars">
                        {item.collaborator.slice(0, 2).map(avatar => (
                          <div key={avatar} className="avatar" style={{ background: `hsl(${(avatar.charCodeAt(0) * 60 + 120) % 360}, 60%, 50%)` }}>
                            {typeof avatar === 'string' && avatar.length > 0 ? avatar.charAt(0).toUpperCase() : ''}
                          </div>
                        ))}
                        {item.collaboratorCount > 0 && (
                          <div className="avatar-more">+{item.collaboratorCount}</div>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Date Range and Location */}
                  <div className="history-info">
                    <div className="date-range">{item.dateRange}</div>
                    <div className="location">{item.location}</div>
                  </div>
                </div>

                <button className="more-button">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <circle cx="8" cy="4" r="1.5" fill="#666"/>
                    <circle cx="8" cy="8" r="1.5" fill="#666"/>
                    <circle cx="8" cy="12" r="1.5" fill="#666"/>
                  </svg>
                </button>
              </div>

              {/* Expanded Records */}
              {isExpanded && item.records && item.records.length > 0 && (
                <div className="history-records">
                  {item.records.map((record, index) => (
                    <div key={record.id} className="history-record">
                      <div className="record-content">
                        <a href="#" className="record-title">{record.title}</a>
                        <div className="record-details">
                          <span className="record-time">
                            时间: 
                            <svg className="clock-icon" width="14" height="14" viewBox="0 0 14 14" fill="none">
                              <circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1"/>
                              <path d="M7 4V7L9 9" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
                            </svg>
                            {record.time}
                          </span>
                          <span className="record-location">{record.location}</span>
                          <span className="record-host">{record.host}</span>
                        </div>
                      </div>
                      <div className="record-actions">
                        {record.hasDelete ? (
                          <button className="delete-button">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                              <path d="M5 3H11M5 3V2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2V3M5 3H3M11 3H13M12 3V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3H12ZM7 7V11M9 7V11" stroke="#999" strokeWidth="1.2" strokeLinecap="round"/>
                            </svg>
                          </button>
                        ) : (
                          <button className="more-button-small">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                              <circle cx="8" cy="4" r="1.5" fill="#666"/>
                              <circle cx="8" cy="8" r="1.5" fill="#666"/>
                              <circle cx="8" cy="12" r="1.5" fill="#666"/>
                            </svg>
                          </button>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )
        })}
      </div>
    </section>
  )
}

export default HistorySection

